<!--水 气用量-->
<template>
  <div class="water">
    <div class="left">
      <img src="../../../assets/img/bg4.png" alt="" srcset="">
      <div>
        <h3>水</h3>
        <h4>每日用量(t)</h4>
        <h2>35594</h2>
      </div>
    </div>
    <div class="line"></div>
    <div class="right">
      <img src="../../../assets/img/bg5.png" alt="" srcset="">
      <div>
        <h3>气</h3>
        <h4>每日用量(m3)</h4>
        <h2>35594</h2>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'water'
}
</script>

<style lang="scss" scoped>
.water {
  box-sizing: border-box;
  padding: 0 50px;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;

  .left, .right {
    min-width: 130px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    h2, h3, h4 {
      margin: 0
    }

    img {
      width: 29px;
      height: 33px;
      margin-right: 16px;
    }

    h3 {
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #21C3E6;
      margin: 5px 0 10px 0;
    }

    h4 {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5CD3FF;
      margin-bottom: 23px;
    }

    h2 {
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  .right {

    image {
      height: 37px;
    }

    h3, h4 {
      color: #FF6B6C;
    }

  }

  .line {
    width: 2px;
    height: 94px;
    background: #21C3E6;
    opacity: 0.2;
  }
}
</style>
